<template>
	<view class="mine">
		<view class="mine-top">
			<navigator url="./mineInfor" hover-class="navigator-hover">
				<view style="display: flex;justify-content: space-between;">
					<view class="mine-personal-infor">
						<view class="mine-photo"><uni-icons color="#bbb" size="70" type="contact-filled" /></view>
						<view class="mine-name">
							<text class="name">陈赫斯</text>
							<text class="details">时代邻里股份有限公司</text>
						</view>
					</view>
					<view class="skip"><icon-svg icon-class="icon-test7" /></view>
				</view>
			</navigator>
			<view class="top-status">
				<view v-for="item in statusList" :key="item.index">
					<navigator :url="item.url" style="text-align: center;">
						<icon-svg :icon-class="item.icon" />
						<view style="margin-top: 10rpx; color: #ccc;">{{ item.title }}</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="mine-center">
			<view class="mine-center-box" v-for="item in centerList" :key="item.index">
				<navigator :url="item.url" style="text-align: center;">
					<view class="center-card">
						<span class="center-title">{{ item.title }}</span>
						<span><icon-svg icon-class="icon-test7" /></span>
					</view>
				</navigator>
			</view>
		</view>
		<view class="mine-footer">
			<view class="mine-footer-box" v-for="item in footerList" :key="item.index">
				<navigator :url="item.url" style="text-align: center;">
					<view class="footer-card">
						<span class="footer-title">{{ item.title }}</span>
						<span><icon-svg icon-class="icon-test7" /></span>
					</view>
				</navigator>
			</view>
		</view>
		<zNavigatorBar />
	</view>
</template>

<script>
import zNavigatorBar from '@/pages/common/navigation';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		zNavigatorBar,
		uniIcons
	},
	data() {
		return {
			statusList: [
				{ url: './finish', icon: 'jurassic_complete', title: '已完成' },
				{ url: './examine', icon: 'luru-xianxing', title: '已审核' },
				{ url: './repayment', icon: 'jilu1', title: '还款记录' }
			],
			centerList: [
				{ url: './myEnterprise', title: '我的企业' },
				{ url: './myCredit', title: '我的信用' },
				{ url: './myAddress', title: '企业通讯录' },
				{ url: './billingInformation', title: '企业开票信息' },
				{ url: './authorization', title: '委托授权' },
				{ url: './mySignature', title: '我的签名' },
				{ url: './accountStetting', title: '账号设置' }
			],
			footerList: [{ url: './helpCenter', title: '帮助中心' }, { url: './about', title: '关于智V' }]
		};
	}
};
</script>

<style lang="scss">
@import '@/style/mixin.scss';
.mine {
	.svg-icon {
		color: $tc;
		font-size: 50rpx;
	}
	.mine-top {
		background: #fff;
		padding: 0 10rpx;
		view {
			.mine-personal-infor {
				padding: 20rpx 0;
				display: flex;
				.mine-photo {
				}
				.mine-name {
					margin: 20rpx;
					.name {
					}
					.details {
						color: #ccc;
						font-size: 30rpx;
						margin-top: 5rpx;
					}
					text {
						display: block;
					}
				}
			}
			.skip {
				padding: 30rpx 0;
			}
		}

		.top-status {
			display: flex;
			justify-content: space-between;
			text {
				color: #ccc;
			}
		}
	}
}
.mine-center {
	background: #fff;
	margin-top: 20rpx;
	.center-card {
		padding: 20rpx 10rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
	}
	&::last-child {
		border: 0;
	}
}
.mine-footer {
	background: #fff;
	margin-top: 20rpx;
	.footer-card {
		padding: 20rpx 10rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
	}
	&::last-child {
		border: 0;
	}
}
</style>
